<template>
  <div class="app-container commercial-content">
    <EzForm
      ref="menuForm"
      :formMap="formMap"
      v-model="formData"
      @search="searchRequest"
    ></EzForm>
    <BtnGroup ref="btnGroup" :btns="btns" @handle="handleBtnGroup" />
    <!-- 工具栏 end-->

    <div>
      <el-table
        v-loading="loading"
        ref="table"
        :key="randomKey"
        :data="lists"
        :height="st"
        lazy
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column label="用户ID" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.user_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变动金额" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.score }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变动类型" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.type_label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变动前" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.before_score }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变动后" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.after_score }}</span>
          </template>
        </el-table-column>
        <el-table-column label="关联ID" width="240">
          <template slot-scope="scope">
            <span>{{ scope.row.object_id }}</span>
          </template>
        </el-table-column>        
        <el-table-column label="变动时间" width="200" prop="created_at">
          <template slot-scope="scope">{{
            scope.row.created_at | dateJudge
          }}</template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>

      </el-table>

      <pagination
        ref="paginationTotal"
        :page="currentPage"
        :total="total"
        :size="pageSize"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
      />
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      randomKey: Math.random(),
      formMap: [
        {
          label: "用户ID",
          key: "id",
          type: "input",
        },
        {
          label: "用户名",
          key: "username",
          type: "input",
        },
        {
          label: "变动类型",
          key: "type",
          type: "select",
          options: [],
        },
        {
          label: "",
          key: "created_at",
          type: "changedata",
        },
      ],
      btns: [

      ],
      formData: {
        id: "", //用户id
        username: "", //用户名
        state: "",//账号状态
        type: "",//用户等级
        created_at: [],
        last_login_time: [],
      },
      upgradeForm: {
        user_id: '',
        profit: '',
      },
      scoreList: [],
      lists: [],
      dialogloading: true,
      loading: false,

      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      total: 0,
      // 个数选择器（可修改）
      pageSizes: [50, 100, 200],
      // 默认每页显示的条数（可修改）
      pageSize: 30,

      st: 0,
      dialogVisible: false,
      diaAddress: false,
      dialogTitle: "",
      isEdit: false,
      choosePlace: [],
      dictList: [],
      place: [],
      country: [],

      // 验证表单
      rules: {
        
      },
    };
  },
  watch: {
    formData: {
      handler(newName, oldName) {
        // let { address } = newName;

        // this.formData.province = address[0];
        // this.formData.city = address[1];
        // this.formData.area = address[2] || "";

        // ...
      },
      deep: true,
    },
  },
  created() {    
    if(this.$route.query.user_id){
      this.formData.user_id = this.$route.query.user_id;
      // this.formMap[0] = this.$route.query.user_id;      
    }
    this.handleRequest();
    this.memberDict();
  },
  mounted() {
    const that = this;
    that.$util.autoHeight(that, that.$refs.table.$el);
  },
  methods: {
    alterData(row, column) {
      row.isShow = false;
      this.refreshTable();
    },
    refreshTable() {
      this.randomKey = Math.random();
    },

    /**
     * 头部按钮列表
     */
    handleBtnGroup(evt) {
      let { handle } = evt;
      switch (handle) {
        // case "new":
        //   this.handleCreate();
        //   break;
        case "open":
          this.settingState(1);
          break;
        case "close":
          this.settingState(0);
          break;
        case "search":
          this.handleRequest();
          break;
        default:
          break;
      }
    },
    
    /**
     * 积分字典项目
     */
     async memberDict(that) {
      
      const { result } = await this.$.member.profitScoreDict();
      this.formMap[2].options = result['type'];
      this.dictList = result;
    },


    /**
     * 关闭对话框
     */
    modalClose() {
      this.dialogVisible = false;
      this.diaAddress = false;
    },

    /**
     *  搜索
     */
    handleSearch(statu) {
      this.currentPage = 1;
      this.handleRequest();
    },
    searchRequest() {
      this.currentPage = 1;
      this.handleRequest();
    },
    /**
     * 弹框的行更改
     */
    rowChange(e) {
      console.log(e);
    },
    sizeChange(e) {
      const that = this;
      that.currentPage = 1;
      that.pageSize = e;
      that.handleRequest();
    },
    currentChange(e) {
      this.currentPage = e;
      this.handleRequest();
    },
    /**
     * 请求列表
     */
    async handleRequest() {
      const that = this;

      const {
        currentPage,
        pageSize,
        created_at,

        formData,
      } = that;
      let o = {
        page_size: pageSize,
        page: currentPage,
      };

      o.start_created_at = !!formData.created_at ? formData.created_at[0] : "";
      o.end_created_at = !!formData.created_at ? formData.created_at[1] : "";
      formData.created_at = '';

      o.start_last_login_time = !!formData.last_login_time ? formData.last_login_time[0] : "";
      o.end_last_login_time = !!formData.last_login_time ? formData.last_login_time[1] : "";

      that.$util.ext(that.formData, o);

      try {
        that.loading = true;
        const { result } = await that.$.member.profitScoreList(that.formData);
        that.total = result.pagination.total_count;
        that.$refs.table.bodyWrapper.scrollTop = 0;
        result.list.map((item, index) => {
          item.index = index;
          item.isShow = false;
        });
        that.lists = result.list;
        console.log("list", that.lists);
        that.loading = false;
      } catch (e) {
        that.loading = false;
      }
    },

    handleSelect() {
      this.currentPage = 1;
      this.handleRequest();
    },
  },
};
</script>

<style lang="scss" scoped>
.inp1 {
  flex: 1;
  margin-right: 12px;
}

.supname {
  margin: -18px 0 0 12px;
}

.label {
  font-size: 13px;
  margin-right: 5px;
}
</style>
<style>
.warehouse-content .cell {
  text-align: center;
}
.add-dialog .el-form-item__content {
  display: flex;
  align-items: center;
}
.warehouse-content .front {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.warehouse-content .front .el-form-item__content {
  margin-left: 0 !important;
}
.add-dialog .edit-tips {
  color: #c0c4cc;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  padding-top: 2px;
  top: 100%;
  left: 0;
}
.add-dialog .dev-tips {
  color: #c0c4cc;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  top: 100%;
  left: 0;
}
.add-dialog .copy-btn {
  margin-left: 24px;
}
</style>